<template>
  <div style="width: 100%; height: 100%; position: relative">
    <table
      style="width: 100%; color: #fff; font-size: 14px"
      class="tableBox"
      border="0"
      cellspacing="0"
    >
      <colgroup>
        <col
          v-for="(item, k) in columnList"
          :key="k"
          :width="item.width ? item.width : ''"
        />
      </colgroup>
      <thead>
        <tr class="column_row">
          <th v-for="(item, k) in columnList" :key="k" scope="col">
            {{ item.name }}
          </th>
        </tr>
      </thead>
    </table>
    <div
      class="table_tbody"
      style="height: calc(100% - 32px); overflow-y: auto; scrollbar-width: none"
    >
      <table
        style="width: 100%; color: #fff; font-size: 16px"
        class="tableBox"
        cellspacing="0"
        border="0"
      >
        <colgroup>
          <col
            v-for="(item, k) in columnList"
            :key="k"
            :width="item.width ? item.width : ''"
          />
        </colgroup>
        <tbody>
          <tr
            v-for="(item, index) in tableData"
            :key="index"
            class="table_tr"
            :class="index % 2 === 0 ? 'table_tr1' : 'table_tr2'"
            @click="selectHdName(item)"
          >
            <td
              v-for="(val, l) in columnList"
              :key="l"
              :style="val"
              class="item_td"
            >
              <div v-if="!val.slot">
                {{ val.type == "index" ? index + 1 : item[val.type] }}
              </div>
              <slot v-else :name="val.slot" :row="item"> </slot>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  title: "roundBar",
  data() {
    return {};
  },
  props: {
    topVal: { type: String || Number, default: "30" },
    columnList: { type: Array, default: () => [] },
    tableData: { type: Array, default: () => [] },
  },
  mounted() {
    this.$nextTick(() => {});
  },
  created() {},
  methods: { selectHdName() {} },
};
</script>
<style lang="scss" scoped>
.table_tr1 {
  background-image: linear-gradient(
    270deg,
    rgba(19, 68, 169, 0.16) 0%,
    rgba(31, 101, 245, 0.16) 100%
  );
}

.table_tr2 {
  background-image: linear-gradient(
    270deg,
    rgba(19, 68, 169, 0.32) 0%,
    rgba(31, 101, 245, 0.32) 100%
  );
}
.column_row {
  height: 40px;
  background-image: linear-gradient(270deg, #1344a9, #1f65f5);
}
.item_td {
  min-height: 40px;
  padding: 0 5px;
  text-align: center;
}
</style>
